<template>
  <div class="home">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>镀锌跑偏分析预测模型</h1>
      </div>
    </div>
    <div class="home-main">
      <el-row class="top h-90%">
        <el-col :span="6">
          <span class="warn">
            <p style="position: absolute; width: 80px; top: 12px; left: 84px; font-size: 12px">跑偏模型</p>
            <p
              style="position: absolute; width: 180px; height: 42px; top: 26px; left: 84px; font-size: 12px; overflow: hidden"
            >后卷过度异常</p>
            <img :src="imagePath(1)" style="width:350px" />
          </span>
        </el-col>
        <el-col :span="6">
          <span class="warn">
            <p style="position: absolute; width: 80px; top: 12px; left: 84px; font-size: 12px">炉温控制</p>
            <p
              style="position: absolute; width: 180px; height: 42px; top: 26px; left: 84px; font-size: 12px; overflow: hidden"
            >后卷过度异常</p>
            <img :src="imagePath(2)" style="width:350px" />
          </span>
        </el-col>
        <el-col :span="6">
          <span class="warn">
            <p style="position: absolute; width: 80px; top: 12px; left: 84px; font-size: 12px">炉辊打滑</p>
            <p
              style="position: absolute; width: 180px; height: 42px; top: 26px; left: 84px; font-size: 12px; overflow: hidden"
            >后卷过度异常</p>
            <img :src="imagePath(3)" style="width:350px" />
          </span>
        </el-col>
        <!-- <el-col :span="6">
                  <span class="warn">
                    <p style="position:absolute;width:80px;top:25px;left:1140px;font-size:12px">平整AI模型</p>
                    <p style="position:absolute;width:180px;height:42px;top:42px;left:1140px;font-size:12px;overflow: hidden;">正常</p>
                    <img :src="imagePath(4)" />
                  </span>
        </el-col>-->
      </el-row>
      <el-row>
        <!-- <el-col class="top-middle" :span="7">
                <div class="msg-title">跑偏模型报警:</div>
                <div class="information">
                    <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="8000">
                    <span>&nbsp; 后卷过度异常，模型进行了**调整</span>
                    <el-icon style="color: red !important"><SuccessFilled /></el-icon>
                    </el-carousel>
                </div>


            </el-col>
            <el-col class="top-middle" :span="7">
                <div class="msg-title">炉温控制模型报警:</div>
                <div class="information">
                    <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="8000">
                    <span>&nbsp; 后卷过度异常，模型进行了**调整</span>
                    <el-icon style="color: red !important"><SuccessFilled /></el-icon>
                    </el-carousel>
                </div>


            </el-col>  
            <el-col class="top-middle" :span="7">
                <div class="msg-title">炉温打滑模型报警:</div>
                <div class="information">
                    <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="8000">
                    <span>&nbsp; 后卷过度异常，模型进行了**调整的点点滴滴的点点滴顶顶顶顶滴</span>
                    <el-icon style="color: red !important"><SuccessFilled /></el-icon>
                    </el-carousel>
                </div>


        </el-col>-->
      </el-row>
      <el-row class="middle">
        <div class="svg">
          <div ref="svgContainerRef" class="svg-container" v-html="svgContent"></div>
        </div>
        <div class="inlet_looper semitransp_box">
          <p style="width:65px">入口活套 {{ numberFormat1(inletLooper / 100) }} %</p>
        </div>
        <div class="inlet_looper_time semitransp_box">
          <p style="width:65px">跑空时间 {{ inletLooperTime }}</p>
        </div>
        <div class="cpc4_width semitransp_box" :class="cpc4WidthAlarm ? 'is_alarm' : ''">
          <p>CPC3测宽值 {{ numberFormat1(cpc4Width) }}mm</p>
        </div>
        <div class="middle_looper semitransp_box">
          <p style="width:65px">中间活套 {{ numberFormat1(middleLooper / 100) }} %</p>
        </div>
        <div class="entZincPot semitransp_box">
          <p style="color: #ff0000">入锅温度 {{ numberFormat1(entZincPot) }} ℃</p>
        </div>
        <div class="zincPotGa semitransp_box">
          <p style="color: #ffd700;width:50px">GA锅 {{ numberFormat1(zincPotGa) }} ℃</p>
        </div>
        <div class="zincPotGi semitransp_box">
          <p style="color: #7fff00;width:50px">GI锅 {{ numberFormat1(zincPotGi) }} ℃</p>
        </div>

        <div class="AlFeBox">
          <div class="alfebox_time semitransp_box">
            <span>{{ giALFeData.time }}</span>
          </div>
          <div class="alfebox_fe semitransp_box">
            <span>铁：</span>
            <span style="color: #ffd700">{{ giALFeData.Fe }}</span>
          </div>
          <div class="alfebox_al semitransp_box">
            <span>铝：</span>
            <span style="color: #7fff00">{{ giALFeData.Al }}</span>
          </div>
        </div>
        <div class="middle_looper_time semitransp_box">
          <p style="width:65px">跑空时间 {{ middleLooperTime }}</p>
        </div>
        <div class="export_looper semitransp_box">
          <p style="width:65px">出口活套 {{ numberFormat1(exportLooper / 100) }} %</p>
        </div>
        <div class="export_looper_time semitransp_box">
          <p style="width:65px">跑空时间 {{ exportLooperTime }}</p>
        </div>
        <div class="uncoiler_remaining_length_a semitransp_box">
          <p>#1开卷机剩余</p>
          <p>{{ numberFormat1(uncoiler_remaining_length_a) }} m</p>
        </div>
        <div class="uncoiler_remaining_length_b semitransp_box">
          <p>#2开卷机剩余</p>
          <p>{{ numberFormat1(uncoiler_remaining_length_b) }} m</p>
        </div>
        <div class="coiler_remaining_length_b semitransp_box">
          <p>卷取长度 {{ numberFormat1(coiler_remaining_length_b) }} m</p>
        </div>
        <div
          class="yield-strength semitransp_box"
          style="position: absolute; left: 65.1vw; top: 2vh; padding: 0 0.5rem; display: flex"
        >
          <p style="padding-top: 2px">屈服强度：</p>
          <p style="padding-top: 2px">{{ numberFormat1(yieldStrength) }}</p>
        </div>

        <div
          class="yield-strength semitransp_box"
          style="position: absolute; left: 65.1vw; top: 4vh; padding: 0 0.5rem; display: flex"
        >
          <p style="padding-top: 2px">抗拉强度：</p>
          <p style="padding-top: 2px">{{ numberFormat1(yieldPull) }}</p>
        </div>

        <div
          class="semitransp_box"
          style="position: absolute; left: 79vw; top: 14vh; padding: 0 0.5rem; display: flex"
        >
          <p>上涂油：</p>
          <p>{{ oilTop * 1 }}</p>
        </div>
        <div
          class="semitransp_box"
          style="position: absolute; left: 79vw; top: 30vh; padding: 0 0.5rem; display: flex"
        >
          <p>下涂油：</p>
          <p>{{ oilBot * 1 }}</p>
        </div>

        <div class="furnace-temp semitransp_box" style="position: absolute; left: 30vw; top: 33vh">
          <p>加热炉温度 {{ numberFormat1(furnaceTemp) }} ℃</p>
        </div>
        <div class="tension-data semitransp_box" style="position: absolute; left: 45vw; top: 33vh">
          <p>工艺段张力 {{ numberFormat1(processTension) }} kN</p>
        </div>

        <div id="middle_speed1" style="margin-left: 20px"></div>
        <div id="middle_speed2"></div>
        <div id="middle_speed3"></div>
        <div id="middle_speed4"></div>
      </el-row>
      <!-- 添加两个柱状图 -->
      <el-row class="foot-lineChart">
        <el-col :span="8">
          <div id="furnaceTensionChart" class="chart-box"></div>
        </el-col>
        <el-col :span="16">
          <div id="deviationAlarmChart" class="chart-box"></div>
        </el-col>
      </el-row>
      <!-- <el-row class="foot-lineChart">
        <el-col :span="12">
          <div class="irregular-card"></div>
        </el-col>
        <div class="pillar"></div>
        <el-col :span="12">
          <div class="irregular-card1"></div>
        </el-col>
        <div class="pillar1"></div>
        <div class="pillar2"></div>
        <div class="pillar3"></div>
        <div class="pillar4"></div>
        <div class="pillar5"></div>
      </el-row> -->
      <el-row class="foot">
        <el-col>
          <new-coil-card title="实时钢卷信息" class="common_table">
            <el-table
              :data="footTable"
              style="width: 100%; border: 1px solid"
              :header-cell-style="{ background: '#2f59af', color: '#fff', fontSize: '15px', border: 'none' }"
              :cell-style="{ fontSize: '15px' }"
              max-height="200px"
            >
              <el-table-column prop="序号" label :width="columnWidth(18)" />
              <el-table-column prop="卷号" label="卷号" :width="columnWidth(18)" />
              <el-table-column prop="钢种" label="钢牌号" :width="columnWidth(18)" />
              <el-table-column prop="宽度" label="厚度(mm)" :width="columnWidth(18)" />
              <el-table-column prop="厚度" label="宽度(mm)" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="跑偏概率(%)" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="跑偏情况" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="跑偏位置" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="严重程度" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="楔形大于凸度米数(m)" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="凸度命中率(%)" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="楔形命中率(%)" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="板形" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="头部板形" :width="columnWidth(16)" />
              <el-table-column prop="命中率" label="全长板形" :width="columnWidth(16)" />
              <el-table-column prop="命中率" label="尾部板形" />
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, onUnmounted, watch, shallowRef, nextTick } from "vue";
import BadInformation from "/@/views/common/FulllineTrack/BadInformation.vue";
import NewCoilCard from "/@/components/NewCoilCard/NewCoilCard.vue";
import * as echarts from "echarts";
import axios from "axios";
import cglSvgContent from "../../assets/svgs/CGL1870.svg?raw";
import { useUserStore } from "/@/store/modules/system/user";

interface PathSegment {
  id: string;
  originalElement: SVGPathElement;
  pathClone: SVGPathElement;
  length: number;
  cumulativeLength: number;
}

const data = ref([
  {
    menuName: "deviationanalysisl",
    menuTitle: "镀锌跑偏分析模型主页",
    menuId:'1'
  },
  {
    menuTitle: "计划卷跑偏预测页面",
    menuName: "PlanRollDeviationPrediction"
  },
  {
    menuTitle: "实际卷跑偏预测页面",
    menuName: "ActualPerformanceRollDeviation"
  },
  {
    menuTitle: "纠偏设备精度诊断",
    menuName: "AccuracyDiagnosisOfCorrectionEquipment"
  },
  {
    menuTitle: "跑偏分档统计",
    menuName: "DeviationClassificatioStatistics"
  },
  { menuTitle: "酸轧板形标准卷", menuName: "AcidRolledStandardCoil" },
  { menuTitle: "镀锌实时工艺参数", menuName: "ProcessParameters" },
  { menuTitle: '镀锌实时工艺参数列表', menuName: 'ProcessParamList' }
]);

const deviationTempModel = ref("CGL1870");
const imagePath = (rowIndex: number) => {
  const name = "warn.png";
  const normal = "normal.png";
  if (rowIndex === 4) {
    return "/src/assets/images/normal.png";
  } else {
    return "/src/assets/images/warn.png";
  }
};

const entSpeed = ref<number>(0);
const spmSpeed = ref<number>(0);
const extSpeed = ref<number>(0);
const lineSpeed = ref<number>(0);
const inletLooper = ref<number>(0);
const middleLooper = ref<number>(0);
const exportLooper = ref<number>(0);
const inletLooperTime = ref<string>("0 min");
const middleLooperTime = ref<string>("0 min");
const exportLooperTime = ref<string>("0 min");
const cpc4Width = ref<number>(0);
const cpc4WidthAlarm = ref<boolean>(false);
const entZincPot = ref<number>(0);
const zincPotGa = ref<number>(0);
const zincPotGi = ref<number>(0);
const giALFeData = ref<any>({});
const uncoiler_remaining_length_a = ref<number>(0);
const uncoiler_remaining_length_b = ref<number>(0);
const coiler_remaining_length_a = ref<number>(0);
const coiler_remaining_length_b = ref<number>(0);
const oilTop = ref<number>(0);
const oilBot = ref<number>(0);
const yieldStrength = ref<number>(0);
const yieldPull = ref<number>(0);
const furnaceTemp = ref<number>(0);
const processTension = ref<number>(0);

const svgContainerRef = ref<HTMLElement | null>(null);
const svgContent = ref(cglSvgContent);
const pathSegments = shallowRef<PathSegment[]>([]);
const coilIds = ref<any[]>([]);
const colors = [
  "#FF0000",
  "#00FF00",
  "#0000FF",
  "#FFFF00",
  "#FF00FF",
  "#00FFFF",
  "#FFA500",
  "#800080",
  "#008000",
  "#A52A2A"
];
const zoneCoilMap = shallowRef<{ [key: string]: string | null }>({});
const coilColorMap = shallowRef<{ [key: string]: string }>({});
let nextColorIndex = 0;

let intervalId: any = null;
let intervalItemTagId: any = null;

// 添加API数据变量
const apiData = ref<any>({});
const trackData = ref<any>({});

const numberFormat1 = (number: any, precision: number = 0) => {
  if (number === undefined || number === null || isNaN(parseFloat(number))) {
    return "0";
  }
  return Number(parseFloat(number).toFixed(precision));
};

const getCoilColor = (entId: string): string => {
  if (!entId || entId === "ENTIDBOOK" || entId.trim() === "") return "#808080";
  const currentMap = coilColorMap.value;
  if (currentMap[entId]) {
    return currentMap[entId];
  }
  const newColor = colors[nextColorIndex % colors.length];
  nextColorIndex++;
  coilColorMap.value = { ...currentMap, [entId]: newColor };
  return newColor;
};

const sleeveDeclineTime = (a: number, b: number) => {
  if (b !== 0 && b !== undefined && !isNaN(a) && !isNaN(b)) {
    const looperMeters = a / 1000;
    if (b > 0) {
      return (looperMeters / b).toFixed(1) + " min";
    } else {
      return "∞";
    }
  } else {
    return "0 min";
  }
};

const finalPathIds = [
  "zone_por1",
  "zone_por1_path",
  "zone_8_1",
  "zone_8_1-6",
  "zone_8_1-6-4",
  "ZONE0",
  "ZONE1",
  "ZONE2",
  "ZONE3",
  "ZONE4",
  "ZONE5",
  "ZONE6",
  "ZONE7",
  "ZONE8",
  "ZONE9",
  "ZONE10",
  "ZONE11",
  "ZONE12",
  "ZONE13",
  "ZONE14",
  "ZONE15",
  "ZONE16",
  "ZONE17",
  "ZONE18",
  "ZONE19",
  "ZONE20",
  "ZONE21",
  "ZONE22",
  "ZONE23",
  "ZONE24",
  "ZONE25",
  "ZONE26",
  "ZONE27",
  "ZONE28",
  "ZONE29",
  "ZONE30",
  "ZONE31",
  "ZONE32",
  "ZONE33",
  "ZONE34",
  "ZONE35",
  "ZONE36",
  "ZONE37",
  "ZONE38",
  "ZONE39",
  "ZONE40",
  "ZONE41",
  "ZONE42",
  "ZONE43",
  "ZONE44",
  "ZONE45",
  "ZONE46",
  "ZONE47",
  "ZONE48",
  "ZONE49",
  "ZONE50",
  "ZONE51",
  "ZONE52",
  "ZONE53",
  "ZONE54",
  "ZONE55",
  "ZONE56",
  "ZONE57",
  "ZONE58",
  "ZONE59",
  "ZONE60",
  "ZONE61",
  "ZONE62",
  "ZONE63",
  "ZONE64",
  "ZONE65",
  "ZONE66",
  "ZONE67",
  "ZONE68",
  "ZONE69",
  "ZONE70",
  "ZONE71",
  "ZONE72",
  "ZONE73",
  "ZONE74",
  "ZONE75",
  "ZONE76",
  "ZONE77",
  "ZONE78",
  "ZONE79",
  "ZONE80",
  "ZONE81",
  "ZONE82",
  "ZONE83",
  "ZONE84",
  "ZONE85",
  "ZONE86",
  "ZONE87",
  "ZONE88",
  "ZONE89",
  "ZONE90",
  "ZONE91",
  "ZONE92",
  "ZONE93",
  "ZONE94",
  "ZONE95",
  "ZONE96",
  "ZONE97",
  "ZONE98",
  "ZONE99",
  "ZONE100",
  "ZONE101",
  "ZONE102",
  "ZONE103",
  "ZONE104",
  "ZONE105",
  "ZONE106",
  "ZONE107",
  "ZONE108",
  "ZONE109",
  "ZONE110",
  "ZONE111",
  "ZONE112",
  "ZONE113",
  "ZONE114",
  "ZONE115",
  "ZONE116",
  "ZONE117",
  "ZONE118",
  "ZONE119",
  "ZONE120",
  "ZONE121",
  "ZONE122",
  "ZONE123",
  "ZONE124",
  "ZONE125",
  "ZONE126",
  "ZONE127",
  "ZONE128",
  "ZONE129",
  "ZONE130",
  "ZONE131",
  "ZONE132",
  "ZONE133",
  "ZONE134",
  "ZONE135",
  "ZONE136",
  "ZONE137",
  "ZONE138",
  "ZONE139",
  "ZONE140",
  "ZONE141",
  "ZONE142",
  "ZONE143",
  "ZONE144",
  "ZONE145",
  "ZONE146",
  "ZONE147",
  "ZONE148",
  "ZONE149",
  "ZONE150",
  "ZONE151",
  "ZONE152",
  "ZONE153",
  "ZONE154",
  "ZONE155",
  "ZONE156",
  "ZONE157",
  "ZONE158",
  "ZONE159",
  "ZONE160",
  "ZONE161",
  "ZONE162",
  "ZONE163",
  "ZONE164",
  "ZONE165",
  "ZONE166",
  "ZONE167",
  "ZONE168",
  "ZONE169",
  "ZONE170",
  "ZONE171",
  "ZONE172",
  "ZONE173",
  "ZONE174",
  "ZONE175",
  "ZONE176",
  "ZONE177",
  "ZONE178",
  "ZONE179",
  "ZONE180",
  "ZONE181",
  "ZONE182",
  "ZONE183",
  "ZONE184",
  "ZONE185",
  "ZONE186",
  "ZONE187",
  "ZONE188",
  "ZONE189",
  "ZONE190",
  "ZONE191",
  "ZONE192",
  "ZONE193",
  "ZONE194",
  "ZONE195",
  "ZONE196",
  "ZONE197",
  "ZONE198",
  "ZONE199",
  "ZONE200",
  "ZONE201",
  "ZONE202",
  "ZONE203",
  "ZONE204",
  "ZONE205",
  "ZONE206",
  "ZONE207",
  "ZONE208",
  "ZONE209",
  "ZONE210",
  "ZONE211",
  "ZONE212",
  "ZONE213",
  "ZONE214",
  "ZONE215",
  "ZONE216",
  "ZONE217",
  "ZONE218",
  "ZONE219",
  "ZONE220",
  "ZONE221",
  "zone_tr1_path",
  "zone_tr1",
  "zone_tr2_path",
  "zone_tr2"
];

const setupSvgAnimation = () => {
  console.log("setupSvgAnimation: Starting...");
  const container = svgContainerRef.value;
  if (!container) {
    console.error("setupSvgAnimation: SVG container not found!");
    return;
  }

  const segments: PathSegment[] = [];
  let currentCumulativeLength = 0;
  pathSegments.value = [];
  console.log("setupSvgAnimation: Processing finalPathIds:", finalPathIds);

  for (const id of finalPathIds) {
    // console.log(`setupSvgAnimation: Processing ID: ${id}`);
    let originalElement = container.querySelector(`#${id}`) as
      | SVGPathElement
      | SVGEllipseElement
      | null;
    if (!originalElement)
      originalElement = container.querySelector(`[id="${id}"]`) as
        | SVGPathElement
        | SVGEllipseElement
        | null;

    if (originalElement && originalElement instanceof SVGPathElement) {
      const length = originalElement.getTotalLength();
      if (length === 0 && !id.startsWith("zone_")) {
        console.warn(
          `Path ${id} has zero length, skipping clone creation (will still inherit color).`
        );
        continue;
      }
      currentCumulativeLength += length;

      if (originalElement.style.stroke !== "none") {
        originalElement.style.stroke = "rgba(255, 255, 255, 0.1)";
        originalElement.style.strokeWidth = "1px";
      }

      const pathClone = originalElement.cloneNode(true) as SVGPathElement;
      pathClone.id = `clone-${id}`;
      pathClone.style.stroke = "transparent";
      pathClone.style.strokeWidth = "0.5px";
      pathClone.style.fill = "none";
      pathClone.style.strokeDasharray = "none";
      pathClone.style.strokeDashoffset = "0";
      pathClone.style.display = "";
      pathClone.style.opacity = "1";
      originalElement.parentNode?.appendChild(pathClone);
      segments.push({
        id,
        originalElement,
        pathClone,
        length,
        cumulativeLength: currentCumulativeLength
      });
    } else if (originalElement) {
      console.log(
        `setupSvgAnimation: Found non-path element or non-SVGPathElement: ${id}, type: ${originalElement.constructor.name}`
      );
    } else {
      console.warn(`setupSvgAnimation: Element not found for ID: ${id}`);
    }
  }

  pathSegments.value = segments;
  console.log(
    "setupSvgAnimation: SVG Animation Setup Complete. Path Segments tracked:",
    pathSegments.value.length
  );
  // updateAnimationDisplay(); // Called by watcher
};

const updateAnimationDisplay = () => {
  console.log("updateAnimationDisplay: Called.");
  console.log(
    "updateAnimationDisplay: pathSegments.length:",
    pathSegments.value.length,
    "zoneCoilMap size:",
    Object.keys(zoneCoilMap.value).length
  );

  if (
    pathSegments.value.length === 0 &&
    Object.keys(zoneCoilMap.value).length === 0
  ) {
    console.log(
      "updateAnimationDisplay: No path segments or zoneCoilMap data to display."
    );
    return;
  }

  const currentZoneCoilMap = zoneCoilMap.value;
  const currentCoilColorMap = coilColorMap.value;
  let coloredSegments = 0;

  for (const segment of pathSegments.value) {
    if (!segment.pathClone) {
      // console.log(`updateAnimationDisplay: Segment ${segment.id} has no pathClone, skipping.`);
      continue;
    }
    const coilId = currentZoneCoilMap[segment.id];
    console.log(
      `updateAnimationDisplay: Processing Segment ID: ${segment.id}. Coil ID from map:`,
      coilId,
      `(Type: ${typeof coilId})`
    );

    if (coilId && coilId !== "ENTIDBOOK" && String(coilId).trim() !== "") {
      const color = currentCoilColorMap[coilId] || "#808080";
      segment.pathClone.style.stroke = color;
      // console.log(`updateAnimationDisplay: Coloring segment ${segment.id} with coil ${coilId} color ${color}`);
      coloredSegments++;
    } else {
      segment.pathClone.style.stroke = "transparent";
      // console.log(`updateAnimationDisplay: Segment ${segment.id} has no valid coilId or is ENTIDBOOK, setting transparent.`);
    }
  }
  console.log(
    `updateAnimationDisplay: Finished. Applied colors to ${coloredSegments} segments.`
  );

  const container = svgContainerRef.value;
  if (!container) {
    console.error(
      "updateAnimationDisplay: SVG container not found for non-path element updates."
    );
    return;
  }
  // Add logic here later if needed to update non-path elements like POR/TR status fills based on API data
};

const getZoneTrk = async () => {
  console.log("getZoneTrk: Fetching data...");
  try {
    const apiUrl = `http://10.171.7.100:8090/restapi?name=${deviationTempModel.value}_zonetrk`;
    console.log("getZoneTrk: API URL:", apiUrl);
    const res = await axios.get(apiUrl);
    console.log("getZoneTrk: API Response received:", res);

    if (res && res.data) {
      console.log(
        "getZoneTrk: Data received:",
        JSON.parse(JSON.stringify(res.data))
      );
      const zoneData = res.data.zoneno;
      // const speedData = res.data.speed; // Speed data is actually in itemtag
      const loopData = res.data.loop;
      trackData.value = res.data;

      // console.log("getZoneTrk: zoneData:", zoneData, "speedData:", speedData, "loopData:", loopData);
      console.log("getZoneTrk: zoneData:", zoneData, "loopData:", loopData);

      // --- Remove Speed Gauge updates from here ---
      /*
      if (speedData) {
        console.log("getZoneTrk: Updating speed gauges.");
        entSpeed.value = speedData.entspeed || 0;
        spmSpeed.value = speedData.spmspeed || 0;
        extSpeed.value = speedData.extspeed || 0;
        lineSpeed.value = speedData.linespeed || 0;
        initScoreChart("middle_speed1", entSpeed.value);
        initScoreChart("middle_speed2", spmSpeed.value); 
        initScoreChart("middle_speed3", extSpeed.value);
        initScoreChart("middle_speed4", lineSpeed.value); 
      }
      */
      // --- End removal ---

      if (loopData) {
        console.log("getZoneTrk: Updating looper info.");
        inletLooper.value = loopData.L_ENTLPCARPOSFBK || 0;
        middleLooper.value = loopData.L_MIDLPCARPOSFBK || 0;
        exportLooper.value = loopData.L_EXTLPCARPOSFBK || 0;
        // Update looper time calculation - needs speeds from itemtag, recalculate there or pass speeds
        // For now, comment out the time calculation here, will be updated in getItemTag
        // inletLooperTime.value = sleeveDeclineTime(inletLooper.value, entSpeed.value);
        // middleLooperTime.value = sleeveDeclineTime(middleLooper.value, lineSpeed.value);
        // exportLooperTime.value = sleeveDeclineTime(exportLooper.value, extSpeed.value);
      }

      // -- Build currentZoneCoils map from API data --
      const currentZoneCoils: { [key: string]: string | null } = {};
      // Process zoneno data
      if (zoneData && typeof zoneData === "object") {
        console.log(
          "getZoneTrk: Processing zoneData keys:",
          Object.keys(zoneData)
        );
        Object.keys(zoneData).forEach(zoneKey => {
          const zoneId = `ZONE${zoneKey}`; // Assuming keys are 0, 1, 2...
          const entId = zoneData[zoneKey]?.entId; // Extract entId from the zone object
          if (
            entId &&
            typeof entId === "string" &&
            entId !== "ENTIDBOOK" &&
            entId.trim() !== ""
          ) {
            currentZoneCoils[zoneId] = entId;
            getCoilColor(entId); // Ensure color is mapped
          } else {
            currentZoneCoils[zoneId] = null;
          }
        });
      }

      // Process POR coils (using keys from API response log)
      const por1ApiCoilId = res.data.por1CoilNo;
      if (por1ApiCoilId) {
        console.log("getZoneTrk: POR1 coil:", por1ApiCoilId);
        currentZoneCoils["zone_por1"] = por1ApiCoilId;
        getCoilColor(por1ApiCoilId);
      }
      const por2ApiCoilId = res.data.por2CoilNo;
      if (por2ApiCoilId) {
        console.log("getZoneTrk: POR2 coil:", por2ApiCoilId);
        currentZoneCoils["zone_por2"] = por2ApiCoilId;
        getCoilColor(por2ApiCoilId);
      }

      // Process TR coils (infer from last zone and active TR number)
      const activeTrNum = res.data.tr; // Get active TR number ('1' or '2')
      const zoneKeys = Object.keys(zoneData || {});
      const lastZoneIndex =
        zoneKeys.length > 0 ? zoneKeys[zoneKeys.length - 1] : null;
      const lastZoneCoilId =
        lastZoneIndex !== null ? zoneData[lastZoneIndex]?.entId : null; // Get coil ID from the last zone

      if (lastZoneCoilId && activeTrNum) {
        const activeTrId = `zone_tr${activeTrNum}`;
        const activeTrPathId = `${activeTrId}_path`;
        console.log(
          `getZoneTrk: Active TR: ${activeTrNum}, Last Zone Coil: ${lastZoneCoilId}. Assigning to ${activeTrId} and ${activeTrPathId}`
        );
        currentZoneCoils[activeTrId] = lastZoneCoilId;
        currentZoneCoils[activeTrPathId] = lastZoneCoilId; // Assign to path as well
        getCoilColor(lastZoneCoilId); // Ensure color is mapped
      } else {
        console.log(
          "getZoneTrk: Could not determine active TR or last zone coil ID."
        );
      }
      console.log(
        "getZoneTrk: currentZoneCoils after POR/TR:",
        JSON.parse(JSON.stringify(currentZoneCoils))
      );

      // -- Calculate Final Coil Map with Propagation --
      let lastValidCoilId: string | null = null;
      const newZoneCoilMap: { [key: string]: string | null } = {};
      finalPathIds.forEach(id => {
        const directCoilId = currentZoneCoils[id];
        // Check if directCoilId is a non-empty string and not 'ENTIDBOOK'
        if (
          directCoilId &&
          typeof directCoilId === "string" &&
          directCoilId !== "ENTIDBOOK" &&
          directCoilId.trim() !== ""
        ) {
          newZoneCoilMap[id] = directCoilId;
          lastValidCoilId = directCoilId; // Update last valid ID
          console.log(
            `getZoneTrk (Propagation): ID ${id} got DIRECT coil ${directCoilId}. lastValidCoilId is now ${lastValidCoilId}`
          );
        } else {
          // Inherit only if lastValidCoilId is not null
          newZoneCoilMap[id] = lastValidCoilId;
          console.log(
            `getZoneTrk (Propagation): ID ${id} has no direct coil (value: ${directCoilId}). Inheriting ${lastValidCoilId}`
          );
        }
      });
      zoneCoilMap.value = newZoneCoilMap;
      console.log(
        "getZoneTrk: Updated zoneCoilMap:",
        JSON.parse(JSON.stringify(zoneCoilMap.value))
      );
      console.log(
        "getZoneTrk: Updated coilColorMap:",
        JSON.parse(JSON.stringify(coilColorMap.value))
      );
    } else {
      console.warn(
        "getZoneTrk: No data in response or response is null/undefined."
      );
    }
  } catch (error) {
    console.error("getZoneTrk: Error fetching zone track data:", error);
    zoneCoilMap.value = {};
  }
};

const getItemTag = async () => {
  console.log("getItemTag: Fetching data...");
  try {
    const apiUrl = `http://10.171.7.100:8090/restapi?name=${deviationTempModel.value}_itemtag`;
    console.log("getItemTag: API URL:", apiUrl);
    const itemTagRes = await axios.get(apiUrl);
    console.log("getItemTag: API Response received:", itemTagRes);

    if (itemTagRes && itemTagRes.data) {
      const itemData = itemTagRes.data;
      console.log(
        "getItemTag: Raw data received:",
        JSON.parse(JSON.stringify(itemData))
      );

      const getItemValue = (key: string, defaultValue: any = 0) => {
        const value = itemData[key];
        // Keep detailed log for now, remove later if needed
        console.log(
          `getItemTag: Attempting to read key '${key}'. Value found:`,
          value
        );
        // Handle potential string numbers from API
        const numValue = parseFloat(value);
        return value !== undefined && value !== null && !isNaN(numValue)
          ? numValue
          : defaultValue;
      };

      // Updated keys based on NewFulllineTrack.vue logic for CGL1870
      entZincPot.value = getItemValue("DB2614_DBD144");
      zincPotGa.value = getItemValue("G333_463NI");
      zincPotGi.value = getItemValue("G333_437NI");
      cpc4Width.value = getItemValue("G11_409NI");
      cpc4WidthAlarm.value = false; // Placeholder, adapt if needed

      // Gi AL/FE data - Still using placeholders as keys are unknown from _itemtag
      const feValue = getItemValue("D_SOME_KEY_FOR_FE", null);
      const alValue = getItemValue("D_SOME_KEY_FOR_AL", null);
      const timeValue =
        itemData["D_SOME_KEY_FOR_TIME"] || new Date().toLocaleTimeString(); // Use raw value if exists
      giALFeData.value = {
        time: timeValue,
        Fe: feValue !== null ? numberFormat1(feValue, 2) : "0",
        Al: alValue !== null ? numberFormat1(alValue, 2) : "0"
      };

      uncoiler_remaining_length_a.value = getItemValue("G201_529NI");
      uncoiler_remaining_length_b.value = getItemValue("G201_536NI");
      coiler_remaining_length_b.value = getItemValue("G414_410NI");
      oilTop.value = getItemValue("OFH_up_oil_volume_avg");
      oilBot.value = getItemValue("OFH_down_oil_volume_avg");
      yieldStrength.value = getItemValue("PI_IMPOC_IFW006");
      yieldPull.value = getItemValue("PI_IMPOC_IFW001");

      // Furnace Temp & Process Tension - Still using placeholders
      furnaceTemp.value = getItemValue("D_FURNACE_TEMP_KEY");
      processTension.value = getItemValue("D_PROCESS_TENSION_KEY");

      // --- Add Speed Gauge updates here ---
      console.log("getItemTag: Updating speed gauges from itemtag data.");
      entSpeed.value = getItemValue("G1_1803NI"); // 入口段速度
      spmSpeed.value = getItemValue("G1_1801NI"); // 光整段速度 (SPM?)
      extSpeed.value = getItemValue("G1_1800NI"); // 出口段速度
      lineSpeed.value = getItemValue("G1_1802NI"); // 工艺段速度 (Line Speed)
      initScoreChart("middle_speed1", entSpeed.value);
      initScoreChart("middle_speed2", spmSpeed.value);
      initScoreChart("middle_speed3", extSpeed.value);
      initScoreChart("middle_speed4", lineSpeed.value);
      // --- End Speed Gauge updates ---

      // --- Recalculate Looper Times now that speeds are available ---
      console.log("getItemTag: Recalculating looper times.");
      inletLooperTime.value = sleeveDeclineTime(
        inletLooper.value,
        entSpeed.value
      );
      middleLooperTime.value = sleeveDeclineTime(
        middleLooper.value,
        lineSpeed.value
      ); // Use lineSpeed for middle looper
      exportLooperTime.value = sleeveDeclineTime(
        exportLooper.value,
        extSpeed.value
      );
      // --- End Looper Time Calculation ---

      console.log(
        "getItemTag: Refs updated. e.g., cpc4Width:",
        cpc4Width.value,
        "furnaceTemp:",
        furnaceTemp.value,
        "processTension:",
        processTension.value,
        "entZincPot:",
        entZincPot.value,
        "entSpeed:",
        entSpeed.value
      );
    } else {
      console.warn(
        "getItemTag: No data in response or response is null/undefined."
      );
    }
  } catch (error) {
    console.error("getItemTag: Error fetching item tag data:", error);
  }
};

watch(
  [zoneCoilMap, coilColorMap],
  () => {
    console.log(
      "Watcher: zoneCoilMap or coilColorMap changed, triggering updateAnimationDisplay."
    );
    updateAnimationDisplay();
  },
  { deep: true }
);

// 添加API更新函数
const updateAllData = async () => {
  try {
    // 获取itemtag数据
    const itemTagResponse = await axios.get('http://10.171.7.100:8090/restapi?name=CAL2150_itemtag');
    if (itemTagResponse.data) {
      apiData.value = itemTagResponse.data;
    }

    // 获取hour数据
    const hourResponse = await axios.get('http://10.171.7.100:8090/restapi?name=CAL2150_hour');
    if (hourResponse.data) {
      trackData.value.speed = hourResponse.data.speed;
      trackData.value.realTV = hourResponse.data.hour;
    }

    // 更新图表数据
    updateChartData();
  } catch (error) {
    console.error('Error updating data:', error);
  }
};

// 更新图表数据函数
const updateChartData = () => {
  const newTagData = apiData.value;
  if (!newTagData) return;

  // 更新纠偏报警信息图表
  const cpcHydraulicKeys = [
    'G105_400NI', 'G105_402NI', 'G105_404NI', 'G105_406NI', 'G105_408NI', 'G105_410NI', 'G105_412NI', 'G105_414NI',
    'G105_416NI', 'G105_418NI', 'G105_420NI', 'G105_422NI', 'G105_424NI', 'G105_426NI', 'G105_428NI', 'G105_430NI',
    'G105_432NI', 'G105_434NI', 'G105_436NI', 'G105_438NI', 'G105_440NI', 'G105_442NI', 'G105_444NI', 'G105_446NI',
    'G105_448NI', 'G105_450NI'
  ];
  const cpcStripKeys = [
    'G105_401NI', 'G105_403NI', 'G105_405NI', 'G105_407NI', 'G105_409NI', 'G105_411NI', 'G105_413NI', 'G105_415NI',
    'G105_417NI', 'G105_419NI', 'G105_421NI', 'G105_423NI', 'G105_425NI', 'G105_427NI', 'G105_429NI', 'G105_431NI',
    'G105_433NI', 'G105_435NI', 'G105_437NI', 'G105_439NI', 'G105_441NI', 'G105_443NI', 'G105_445NI', 'G105_447NI',
    'G105_449NI', 'G105_451NI'
  ];
  const cpcHydraulic = cpcHydraulicKeys.map(key => Math.round(Number(newTagData[key] || 0)));
  const cpcStrip = cpcStripKeys.map(key => Math.round(Number(newTagData[key] || 0)));

  if (document.getElementById('deviationAlarmChart')) {
    const deviationDom = document.getElementById('deviationAlarmChart');
    if (deviationDom) {
      const deviationAlarmChart = echarts.getInstanceByDom(deviationDom);
      if (deviationAlarmChart) {
        deviationAlarmChart.setOption({
          series: [
            { data: cpcHydraulic },
            { data: cpcStrip }
          ]
        });
      }
    }
  }

  // 更新炉区张力图表
  const tensionSetKeys = [
    'G102_433NI', 'G102_438NI', 'G102_443NI', 'G102_448NI', 'G102_453NI', 'G102_458NI', 'G102_463NI', 'G102_468NI', 'G102_473NI', 'G102_478NI'
  ];
  const tensionRealKeys = [
    'G102_434NI', 'G102_439NI', 'G102_444NI', 'G102_449NI', 'G102_454NI', 'G102_459NI', 'G102_464NI', 'G102_469NI', 'G102_474NI', 'G102_479NI'
  ];
  const tensionSet = tensionSetKeys.map(key => parseFloat(Number(newTagData[key] || 0).toFixed(2)));
  const tensionReal = tensionRealKeys.map(key => parseFloat(Number(newTagData[key] || 0).toFixed(2)));
  const tensionAll = tensionSet.concat(tensionReal);
  let tensionMax = Math.ceil(Math.max(...tensionAll) * 1.2);
  let tensionMin = Math.floor(Math.min(...tensionAll) * 1.2);
  
  if (document.getElementById('furnaceTensionChart')) {
    const furnaceDom = document.getElementById('furnaceTensionChart');
    if (furnaceDom) {
      const furnaceTensionChart = echarts.getInstanceByDom(furnaceDom);
      if (furnaceTensionChart) {
        furnaceTensionChart.setOption({
          yAxis: { min: tensionMin, max: tensionMax },
          series: [
            { data: tensionSet },
            { data: tensionReal }
          ]
        });
      }
    }
  }
};

onBeforeMount(() => {
  useUserStore().setTagNav(data.value);
}),
  onMounted(() => {
    initScoreChart("middle_speed1", entSpeed.value);
    initScoreChart("middle_speed2", spmSpeed.value);
    initScoreChart("middle_speed3", extSpeed.value);
    initScoreChart("middle_speed4", lineSpeed.value);

    // 初始化炉区张力图表
    const furnaceTensionChart = echarts.init(document.getElementById('furnaceTensionChart'));
    furnaceTensionChart.setOption({
        title: {
            text: '炉区张力[kN]',
            left: 10,
            top: 10,
            textStyle: { color: '#fff', fontSize: 14 }
        },
        tooltip: {},
        legend: { show: false },
        grid: { left: 40, right: 20, top: 40, bottom: 30 },
        xAxis: {
            type: 'category',
            data: [
                'PHS张力', 'HS1张力', 'HS2张力', 'SS张力', 'SCS张力', 'RCS张力', 'OA1张力', 'OA2张力', 'OA3张力', 'FCS张力'
            ],
            axisLabel: { color: '#fff', fontSize: 12, show: true }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 20,
            axisLabel: { color: '#fff', fontSize: 12 }
        },
        series: [
            {
                type: 'bar',
                data: [14, 9, 8, 8, 8, 11, 10, 10, 11, 15], // 这里后续用实际数据替换
                barWidth: 18,
                itemStyle: { color: '#4ea6e6' },
                barGap: '0%',
                barCategoryGap: '0%'
            },
            {
                type: 'bar',
                data: [12, 8, 7, 7, 7, 10, 9, 9, 10, 14], // 这里后续用实际数据替换
                barWidth: 18,
                itemStyle: { color: '#ffd84a' },
                barGap: '0%',
                barCategoryGap: '0%'
            }
        ]
    });

    // 初始化纠偏报警信息图表
    const deviationAlarmChart = echarts.init(document.getElementById('deviationAlarmChart'));
    const cpcLabels = [
        'cpc1', 'cpc2', 'cpc3', 'cpc4', 'cpc5', 'cpc6', 'cpc7', 'cpc8',
        'cpc9.0', 'cpc9.1', 'cpc9.2', 'cpc9.3', 'cpc9.4', 'cpc9.5', 'cpc9.6', 'cpc9.7', 'cpc9.8',
        'cpc10', 'cpc11', 'cpc12', 'cpc13', 'cpc14', 'cpc15', 'cpc16', 'cpc17'
    ];
    // 静态假数据，液压缸和带钢各26项
    const cpcHydraulic = [10, 12, 8, 15, 7, 9, 11, 13, 6, 8, 10, 12, 7, 9, 11, 13, 8, 10, 12, 8, 15, 7, 9, 11, 13, 8].map(Math.round);
    const cpcStrip = [3, 2, 1, 4, 0, -1, 2, 3, 1, 0, -2, 1, 2, 0, -1, 1, 0, 3, 2, 1, 4, 0, -1, 2, 3, 1].map(Math.round);
    deviationAlarmChart.setOption({
        title: [
            { text: '纠偏报警信息', left: 10, top: 10, textStyle: { color: '#fff', fontSize: 14 } },
            { text: '液压缸(mm)', left: 110, top: 10, textStyle: { color: '#4ea6e6', fontSize: 12 } },
            { text: '带钢(mm)', left: 210, top: 10, textStyle: { color: '#ffd84a', fontSize: 12 } }
        ],
        tooltip: {},
        legend: {
            data: ['液压缸(mm)', '带钢(mm)'],
            right: 30,
            top: 10,
            textStyle: { color: '#fff', fontSize: 12 }
        },
        grid: { left: 40, right: 40, top: 40, bottom: 30 },
        xAxis: {
            type: 'category',
            data: cpcLabels,
            axisLabel: { color: '#fff', fontSize: 12 }
        },
        yAxis: {
            type: 'value',
            min: -100,
            max: 100,
            axisLabel: { color: '#fff', fontSize: 12 },
            splitLine: { lineStyle: { color: '#444' } }
        },
        series: [
            {
                name: '液压缸(mm)',
                type: 'bar',
                data: cpcHydraulic,
                barWidth: 14,
                itemStyle: { color: '#4ea6e6' },
                barGap: '0%',
                barCategoryGap: '0%'
            },
            {
                name: '带钢(mm)',
                type: 'bar',
                data: cpcStrip,
                barWidth: 14,
                itemStyle: { color: '#ffd84a' },
                barGap: '0%',
                barCategoryGap: '0%'
            }
        ]
    });

    nextTick(() => {
      console.log(
        "onMounted (nextTick): DOM updated, calling setupSvgAnimation and fetchData."
      );
      setupSvgAnimation();
      fetchData(); // This calls getZoneTrk and getItemTag
    });

    console.log("onMounted: Setting up intervals.");
    intervalId = setInterval(getZoneTrk, 2000);
    intervalItemTagId = setInterval(getItemTag, 2000);
    
    // 添加API数据更新
    updateAllData();
    const updateIntervalId = setInterval(() => {
      updateAllData();
    }, 3000); // 每3秒更新一次
  });

onUnmounted(() => {
  console.log("onUnmounted: Clearing intervals.");
  if (intervalId) clearInterval(intervalId);
  if (intervalItemTagId) clearInterval(intervalItemTagId);
});

const fetchData = async () => {
  console.log(
    "fetchData: Starting parallel fetch for getZoneTrk and getItemTag."
  );
  await Promise.all([getZoneTrk(), getItemTag()]);
  console.log("fetchData: Both fetches completed.");
};

const SpeedBaseOption: any = {
  middle_speed1: {
    max: 500,
    segmentation1: 80,
    segmentation2: 300
  },
  middle_speed2: {
    max: 500,
    segmentation1: 120,
    segmentation2: 300
  },
  middle_speed3: {
    max: 500,
    segmentation1: 80,
    segmentation2: 300
  },
  middle_speed4: {
    max: 300,
    segmentation1: 80,
    segmentation2: 180
  }
};

const initScoreChart = (chartId: string, value: number) => {
  let speedChart = echarts.getInstanceByDom(
    document.getElementById(chartId) as HTMLElement
  );
  if (speedChart === undefined)
    speedChart = echarts.init(document.getElementById(chartId) as HTMLElement);
  const baseOption = SpeedBaseOption[chartId];
  let option = {
    series: [
      {
        type: "gauge",
        center: ["50%", "50%"],
        radius: "80%",
        startAngle: 225,
        endAngle: -45,
        max: baseOption.max,
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 7,
            color: [
              [
                1,
                new echarts.graphic.LinearGradient(0, 1, 0.9, 1, [
                  {
                    offset: 0,
                    color: "#D64444"
                  },
                  {
                    offset: 0.2,
                    color: "#D86E6D"
                  },
                  {
                    offset: 0.5,
                    color: "#F1F3F4"
                  },
                  {
                    offset: 0.65,
                    color: "#F1F3F4"
                  },
                  {
                    offset: 0.8,
                    color: "#79ACF6"
                  },
                  {
                    offset: 1,
                    color: "#1976FD"
                  }
                ])
              ]
            ]
          }
        },
        pointer: {
          length: "90%",
          width: 2,
          color: "FFFFFF"
        },
        axisTick: {
          distance: -14,
          length: 2,
          lineStyle: {
            color: "#4B83F7",
            width: 2
          }
        },
        splitLine: {
          distance: -16,
          length: 6,
          lineStyle: {
            color: "#4B83F7",
            width: 2
          }
        },
        axisLabel: {
          color: "#FFF",
          fontSize: 14,
          distance: -30,
          rotate: "tangential",
          formatter: function(value: any) {
            if (value === 0) {
              return "";
            } else if (value === baseOption.segmentation1) {
              return "";
            } else if (value === baseOption.segmentation2) {
              return "";
            } else if (value === baseOption.max) {
              return "";
            }
            return "";
          }
        },
        title: {
          offsetCenter: [0, "70%"],
          fontSize: 12,
          color: "#FFF"
        },
        detail: {
          fontSize: 18,
          offsetCenter: [0, "30%"],
          valueAnimation: true,
          formatter: function(value: any) {
            return Math.round(value); // 只显示整数
          },
          color: "#FFF"
        },
        data: [
          {
            value: value,
            name: "mpm"
          }
        ]
      }
    ]
  };
  speedChart.setOption(option);
};

const footTable = ref([
  {
    序号: "POR_ID1",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID2",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID3",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID4",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID5",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID6",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID7",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID8",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID9",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  }
]);

const columnWidth = (percent: number) => {
  const tableWidth = 500;
  return (tableWidth * percent) / 100 + "px";
};
</script>
<style scoped lang="less">
.home {
  width: 100vw;
  height: 100vh;
  background: url(/@/assets/images/home/body-bg.jpg) no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .home-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1vh;

    .top {
      width: 100%;
      height: 10vh;
      display: flex;
      align-items: center;
    }

    .middle {
      width: 100%;
      height: 40vh;
      position: relative;

      .svg {
        width: 100%;
        height: 100%;
      }
    }

    .footer {
      width: 100%;
      height: 25vh;
    }
  }
}

.header {
  height: 10vh;
  min-height: 60px;
  background-image: url(/src/assets/img/head-bg.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.warn {
  color: #fff;
  width: 100%;
  height: 100%;
  padding: 0 1vw;
  position: relative;
  display: flex;
  align-items: center;
}

.top-middle {
  display: flex;
  width: 100%;
  margin: 0.5vh 0;
}

.msg-title {
  background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(12px, 2vh, 16px);
  font-weight: bolder;
  padding: 0.5vh 1vw;
}

.information {
  color: #fff;
  width: 100%;
  height: 4vh;
  min-height: 30px;
  border: 2px solid #3981d9;
  border-radius: 5px;
  padding: 0.5vh 1vw;
  overflow: auto;
  font-size: clamp(10px, 1.2vh, 14px);
  line-height: 1.5;
  white-space: nowrap;
}

.middle {
  .semitransp_box {
    position: absolute;
    border-radius: 4px;
    background: #063e90;
    padding: 0.5vh 0.5vw;
    font-weight: 600;
    text-align: center;
    color: #fff;
    font-size: clamp(8px, 1vh, 12px);
  }

  .inlet_looper {
    left: 11.9%;
    top: 24%;
  }

  .inlet_looper_time {
    left: 11.9%;
    top: 15%;
  }

  .cpc4_width {
    left: 4%;
    top: 78%;
  }

  .middle_looper {
    left: 51.6%;
    top: 15%;
  }

  .entZincPot {
    left: 59.5%;
    top: calc(28vh - 1px);
  }

  .zincPotGa {
    left: 64.5%;
    top: 66%;
  }

  .zincPotGi {
    left: 64.5%;
    top: 75%;
  }

  .AlFeBox {
    left: 65.1%;
    top: calc(12vh - 1px);
  }

  .middle_looper_time {
    left: 51.6%;
    top: 24%;
  }

  .export_looper {
    left: 74%;
    top: 13%;
  }

  .export_looper_time {
    left: 74%;
    top: 22%;
  }

  .uncoiler_remaining_length_a {
    left: 0.5%;
    top: calc(-1vh + 18px);
  }

  .uncoiler_remaining_length_b {
    left: 0.5%;
    top: calc(3vh + 18px);
  }

  .coiler_remaining_length_b {
    left: 93%;
    top: 50%;
  }

  .yield-strength {
    left: 64%;
    top: calc(8vh - 1px);
  }
}

.foot-lineChart {
  height: 22vh;
  width: 100%;
  margin-top: 1vh;
  position: relative;
}

.chart-box {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #2f59af;
  border-radius: 4px;
}

.common_table {
  height: 22.5vh !important;

  :deep(.el-table) {
    --el-table-row-hover-bg-color: unset;
    height: 100%;
    font-size: clamp(10px, 1.2vh, 14px);
  }
}

:deep(.el-table) {
  background-color: transparent !important;

  .el-table__row {
    background-color: #162556 !important;
  }

  .el-table__inner-wrapper::before {
    background-color: #173d91;
  }

  .cell {
    line-height: 1.2;
    padding: 0.5vh 0.5vw;
  }
}

.alfebox_time{
  left: 66%;
  top:20%;
}
.alfebox_fe{
  left: 66%;
  top:26%;
}
.alfebox_al{
  left: 66%;
  top:32%;
}
.irregular-card,
.irregular-card1 {
  position: relative;
  width: 100%;
  height: 110px;
  margin-top: 35px;
  clip-path: polygon(
    0% 20%,
    0% 80%,
    25% 100%,
    50% 80%,
    75% 80%,
    100% 80%,
    100% 20%,
    75% 20%,
    50% 20%,
    25% 40%
  );
  z-index: 1;
}

.irregular-card {
  background-image: -webkit-linear-gradient(left, #016b9b, #03dafb);
}

.irregular-card1 {
  background-image: -webkit-linear-gradient(left, #fcc68f, #fe7b12);
  clip-path: polygon(
    0% 20%,
    0% 80%,
    25% 80%,
    50% 80%,
    75% 80%,
    100% 80%,
    100% 20%,
    75% 20%,
    50% 20%,
    25% 20%
  );
}

.pillar {
  position: absolute;
  width: 10px;
  height: 105px;
  background-image: url(/src/assets/images/pillar.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.pillar {
  top: 58px;
  right: 1232px;
}

.pillar1 {
  top: 40px;
  right: 1061px;
}

.pillar2 {
  top: 40px;
  right: 881px;
}

.pillar3 {
  top: 40px;
  right: 526px;
}

.pillar4 {
  top: 40px;
  right: 341px;
}

.pillar5 {
  top: 40px;
  right: 174px;
}

.svg-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;

  > :deep(svg) {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    overflow: visible !important;
  }
}

// Speed gauges
#middle_speed1,
#middle_speed2,
#middle_speed3,
#middle_speed4 {
  position: absolute;
  width: 30%;
  height: 35%;
  z-index: 889;
}

#middle_speed1 {
  left: -8%;
  top: calc(7vh - 40px);
}

#middle_speed2 {
  left: 47%;
  top: calc(7vh - 35px);
}

#middle_speed3 {
  left: 69%;
  top: calc(7vh - 60px);
}

#middle_speed4 {
  left: 6.5%;
  top: calc(7vh - 1px);
}

// Media queries for different screen sizes
@media screen and (max-width: 1366px) {
  .home-main {
    .middle {
      height: 45vh;
    }

    .footer {
      height: 30vh;
    }
  }

  .pillar {
    transform: scale(0.8);
  }
}

@media screen and (min-width: 1920px) {
  .home-main {
    .middle {
      height: 35vh;
    }

    .footer {
      height: 20vh;
    }
  }

  .pillar {
    transform: scale(1.2);
  }
}
</style>
